/**
 * 文件说明 - 模板文件
 */

import { CSSProperties } from "react";
import { Form, Input, Button } from "antd";
import { showMessage } from "../../components/_utils";

export interface AddArgs {
  id: number;
  value: string;
}

interface Props {
  className?: string;
  style?: CSSProperties;
  id: number;
  onConfirm?: (args: AddArgs) => void;
  [key: string]: any;
}

export default ({
  className = "",
  id,
  onConfirm,
  children,
  ...restProps
}: Props) => {
  const [form] = Form.useForm();
  const initVals = { id, value: `测试项${id}` };
  function handleFinishFailed(err: any) {
    const { errorFields } = err;
    const tips = errorFields?.[0]?.errors?.[0];
    showMessage(tips, "error");
  }
  function handleReset() {
    form.resetFields();
  }
  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      className={`${className}`}
      style={{ width: "450px" }}
      onFinish={onConfirm}
      onFinishFailed={handleFinishFailed}
      initialValues={initVals}
      {...restProps}
    >
      <Form.Item label="ID" name="id">
        <Input placeholder="请输入id" disabled allowClear />
      </Form.Item>
      <Form.Item
        name="value"
        label="文本内容"
        rules={[{ required: true, message: "请输入文本内容" }]}
        required
      >
        <Input.TextArea
          placeholder="请输入文本内容"
          maxLength={300}
          showCount
          allowClear
        />
      </Form.Item>
      <Form.Item className="f-c-c">
        <Button htmlType="submit" className="mr-8" type="primary">
          确定
        </Button>
        <Button htmlType="button" onClick={handleReset} type="primary" ghost>
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};
